<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-cn">
<%--静态包含头部信息--%>
<%@include file="/WEB-INF/include-head.jsp" %>
<link href="ztree/zTreeStyle.css" rel="stylesheet">
<script src="ztree/jquery.ztree.all-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript" src="crowd/my-menu.js"></script>
<script type="text/javascript">
    $(function () {

        // 调用专门封装好的函数显示树形结构
        generateTree();

        // var zNodes = [
        //     {
        //         name: "父节点1 - 展开", open: true,
        //         children: [
        //             {
        //                 name: "父节点11 - 折叠",
        //                 children: [
        //                     {name: "叶子节点111"},
        //                     {name: "叶子节点112"},
        //                     {name: "叶子节点113"},
        //                     {name: "叶子节点114"}
        //                 ]
        //             },
        //             {
        //                 name: "父节点12 - 折叠",
        //                 children: [
        //                     {name: "叶子节点121"},
        //                     {name: "叶子节点122"},
        //                     {name: "叶子节点123"},
        //                     {name: "叶子节点124"}
        //                 ]
        //             },
        //             {name: "父节点13 - 没有子节点", isParent: true}
        //         ]
        //     },
        //     {
        //         name: "父节点2 - 折叠",
        //         children: [
        //             {
        //                 name: "父节点21 - 展开", open: true,
        //                 children: [
        //                     {name: "叶子节点211"},
        //                     {name: "叶子节点212"},
        //                     {name: "叶子节点213"},
        //                     {name: "叶子节点214"}
        //                 ]
        //             },
        //             {
        //                 name: "父节点22 - 折叠",
        //                 children: [
        //                     {name: "叶子节点221"},
        //                     {name: "叶子节点222"},
        //                     {name: "叶子节点223"},
        //                     {name: "叶子节点224"}
        //                 ]
        //             },
        //             {
        //                 name: "父节点23 - 折叠",
        //                 children: [
        //                     {name: "叶子节点231"},
        //                     {name: "叶子节点232"},
        //                     {name: "叶子节点233"},
        //                     {name: "叶子节点234"}
        //                 ]
        //             }
        //         ]
        //     },
        //     {name: "父节点3 - 没有子节点", isParent: true}
        //
        // ];

        // 给点击添加菜单按钮绑定点击事件
        $("#treeDemo").on("click", ".addBtn", function () {

            $("#menuAddModal").modal("show");

            // 将当前节点的ip 作为父节点pid存入到全局变量中
            window.pid = this.id;

            // 取消超链接默认行为
            return false;
        })

        // 给添加菜单按钮绑定单击事件
        $("#menuSaveBtn").click(function () {

            // 获取输入的菜单信息
            var pid = window.pid;
            var menuName = $("#menuAddModal [name=name]").val();
            var menuUrl = $("#menuAddModal [name=url]").val();
            var menuIcon = $("#menuAddModal [name=icon]:checked").val();

            $.ajax({
                url: "/menu/save/menu.json",
                type: "POST",
                data: {
                    "pid": pid,
                    "name": menuName,
                    "url": menuUrl,
                    "icon": menuIcon
                },
                dataType: "JSON",
                success: function (resp) {
                    var result = resp.operationResult;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功!");
                        // 重新加载树形结构
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg(resp.operationMessage)
                    }
                }
            })
            $("#menuAddModal").modal("hide");
        });

        // 给点击编辑按钮绑定点击事件
        $("#treeDemo").on("click", ".editBtn", function () {

            // 将当前节点的 id 保存到全局变量
            window.id = this.id;

            // 打开模态框
            $("#menuEditModal").modal("show");

            // 获取zTree对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");

            // 根据节点属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";
            // 用来搜索节点的属性值
            var value = window.id;
            var currentNode = zTreeObj.getNodeByParam(key, value);

            // 回显表单数据
            $("#menuEditModal [name=name]").val(currentNode.name);
            $("#menuEditModal [name=url]").val(currentNode.url);

            // 回显 radio 可以这样理解：被选中的 radio 的 value 属性可以组成一个数组，
            // 然后再用这个数组设置回 radio，就能够把对应的值选中
            $("#menuEditModal [name=icon]").val([currentNode.icon]);

            return false;
        });

        // 给更新模态框中的更新按钮绑定单击响应函数
        $("#menuEditBtn").click(function () {
            // 收集表单数据
            var name = $("#menuEditModal [name=name]").val();
            var url = $("#menuEditModal [name=url]").val();
            var icon = $("#menuEditModal [name=icon]:checked").val();
            // 发送 Ajax 请求
            $.ajax({
                "url": "menu/update.json",
                "type": "post",
                "data": {
                    "id": window.id,
                    "name": name,
                    "url": url,
                    "icon": icon
                },
                "dataType": "json",
                "success": function (response) {
                    var result = response.result;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            // 关闭模态框
            $("#menuEditModal").modal("hide");
        });

        // 给“×”按钮绑定单击响应函数
        $("#treeDemo").on("click", ".removeBtn", function () {

            // 将当前节点的 id 保存到全局变量
            window.id = this.id;
            // 打开模态框
            $("#menuConfirmModal").modal("show");

            // 获取 zTreeObj 对象
            var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
            // 根据 id 属性查询节点对象
            // 用来搜索节点的属性名
            var key = "id";
            // 用来搜索节点的属性值
            var value = window.id;

            var currentNode = zTreeObj.getNodeByParam(key, value);

            $("#removeNodeSpan").html("【 <i class='" + currentNode.icon + "'></i>" + currentNode.name + "】");

            return false;
        });

        // 给删除确认模态框绑定点击事件
        $("#confirmBtn").click(function () {
            $.ajax({
                "url": "menu/remove.json",
                "type": "post",
                "data": {
                    "id": window.id
                },
                "dataType": "json",
                "success": function (response) {
                    var result = response.operationResult;
                    if (result == "SUCCESS") {
                        layer.msg("操作成功！");
                        // 重新加载树形结构，注意：要在确认服务器端完成保存操作后再刷新
                        // 否则有可能刷新不到最新的数据，因为这里是异步的
                        generateTree();
                    }
                    if (result == "FAILED") {
                        layer.msg("操作失败！" + response.message);
                    }
                },
                "error": function (response) {
                    layer.msg(response.status + " " + response.statusText);
                }
            });
            // 关闭模态框
            $("#menuConfirmModal").modal("hide");
        })


    });
</script>

<body>

<%--静态包含导航栏--%>
<%@include file="/WEB-INF/include-nav.jsp" %>

<div class="container-fluid">
    <div class="row">
        <%--        静态包含菜单栏--%>
        <%@include file="/WEB-INF/include-sidebar.jsp" %>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 权限菜单列表
                    <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i
                            class="glyphicon glyphicon-question-sign"></i></div>
                </div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<%@include file="/WEB-INF/modal-menu-add.jsp" %>
<%@include file="/WEB-INF/modal-menu-edit.jsp" %>
<%@include file="/WEB-INF/modal-menu-confirm.jsp" %>
